<template>
        <div class="nav-box">
            <div class="nav-item">
                 <div>
                    <div @click="onShouY"> <img class="nav-img" src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt=""> </div>
                </div>
                <div >
                    <div class="one" @click="onShouY">首页</div>
                </div> 
                <div class="all" @mouseenter="getShow(item.id)" @mouseleave="show=false" v-for="item in navData" :key="item.id">
                    <div class="one" @click="onGetId(item.id)">{{item.name}}</div>
                    <div class="two">
                         <div  v-show="show&&id==item.id"  v-for="itemIn in item.children" :key="itemIn.id">
                            <div class="two-item"  @click="onData(itemIn)">
                                <img class="two-img" :src="itemIn.picture" alt="">
                                <div>{{itemIn.name}}</div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                 <slot> </slot>
            </div>
        </div>
</template>

<script>
import user from "@/api/user";
export default {
    data(){
        return {
            id:0,
            navData:[],
            navGoodsData:[],
            show:false
        }
    },
    async created(){
        const res = await user.getHeaderData();
        this.navData=res.data.result;
        // console.log(this.navData);
    },
    methods:{
        getShow(id){
            this.id=id;
            this.show=true;
        },
        onShouY() {
            //点击首页
            this.bus.$emit("shouyeNum", false);
        },
        onGetId(val) {
            //获取头部id
            this.bus.$emit("goodId", val);
            this.bus.$emit("shouyeNum", true);
        },
        onData(val) {
            console.log(val);
            this.$store.commit("setPageItemData", val);
            this.$router.push({ path: "/home/detailslist", query: { val } });
        },
    }
}
</script>

<style>
    .nav-box{width:100%; background:white;}
    .nav-item{ margin:0 auto; display:flex; width:80vw; justify-content:space-between; position:relative; align-items:center;}
    .nav-item>div{width:18%;}
    .nav-item input{border:none; border-bottom:1px solid #eee; } 
    .nav-img{width:200px; height:100%; background:white;}
    /* .all{width:14%;}  */
    .nav-item .one{height:100px; line-height:100px;}
    .two{position:absolute; left:0; top:100px; width:100%; box-sizing:border-box; display:flex; background:white; z-index:100000000 !important; }
    .two-item{ padding:20px 30px;}  
    .two-img{width:100px; height:100px;}
</style>
